<template>
  <div>
    <el-row style="height:100px">
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <div @click="oneC()" style="float:left;cursor: pointer">耗电量月统计 |</div>
          <div @click="twoC()" style="float:left;cursor: pointer">耗电分类统计 |</div>
          <div @click="threeC()" style="cursor: pointer">水流量月分类统计</div>
        </div>
      </el-col>
      <el-col :span="8" >
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
     <div class="row">
		   	  <div class="row-item">
		   	  	  <span>月</span>
		   	  	  <span style="width:1px;height: 100%;background:#63b0ff"></span>
		   	  	  <span>年</span>
		   	  </div>
		   </div>
    <el-row>
      <el-col :span="24">
        <div id="myChart2" style="width:100%" :style="{ height: '600px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>
<style>
	.row{
		display: flex;
	
	}
	.row-item{
		margin-left: auto;
		display: flex;
	}
</style>
<script>
export default {
  data() {
    return {
    treeInBuildData:[],
    props: {
					value: 'id',
					label: 'name',
					children: 'sub'
				}
    };
  },
  mounted() {
    this.getData2();
    this.getBuildDataInTree();
  },
  methods: {
   oneC() {
      debugger;
        this.$router.push({
            path: "/echarts"
          });
    },
    twoC() {
     this.$router.push({
            path: "/echartsOne"
          });
    },
    threeC() {
      debugger;
      this.$router.push({
            path: "/echartsTwo"
          });
    },
  	////获取楼层数据书结构
			getBuildDataInTree() {
				this.$httpRequest.get('api/Build/GetBuildTree', "", res => {
					this.treeInBuildData = res.data
					console.log(this.treeInBuildData);
				})
			},
			//楼层选择
			handleItemChange(val) {
				var buildId = val[val.length - 1];
				this.deviceData = [],
				this.deviceId = "",
				this.getDevData.BuildID = buildId;
				this.getBuildDataInTree();
			},
    getData2() {
      //水流量月分类统计
      this.$httpRequest.get("api/Device/GetWaterReport", "", res => {
        // 基于准备好的dom，初始化echarts实例
        let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
        // 绘制图表
        myChart2.setOption({
          title: {
            text: "水流量月分类统计"
          },

          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: res.data.legend
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value"
          },
          yAxis: {
            type: "category",
            data: res.data.xdata
          },
          series: res.data.series
        });
        this.myChart2 = myChart2;
      });
    }
  }
};
</script>